<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view v-if="top==1"> d </view>
				<view v-else-if="top==2">
					{{text}}
				</view>
				<view></view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="content">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		onMounted
	} from "vue"
	defineProps({
		top: {
			type: String,
			default: "3"
		},
		// 头部内容
		text: {
			type: String,
			default: "title"
		}
	})
	let statusBarHeight = ref(0) // 状态栏高度
	let navBarHeight = ref(82 + 11) // 导航栏高度

	onMounted(() => {
		console.log(statusBarHeight.value)
		statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
	})
</script>

<style scoped>
	.navBarBox {
		
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
		font-weight: 700;
		background-color: #fff !important;
		border-bottom: 1px solid #ccc;
		position: fixed;
		top:0;
		left: 0;
		z-index: 300;

	}

	.content {
		background-color: rgb(245, 245, 245);
	}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		font-size: 26rpx;
		padding-bottom: 8rpx;
		display: flex;
		margin-left: 30rpx;
		flex-direction: row;
		justify-content: space-between;
		margin-right: 30rpx;
	}

	.navBarBox .navBar .logo {
		width: 82rpx;
		height: 82rpx;
		margin-right: 10rpx;
	}
</style>